<template>
  <!-- min-h-screen:占整个浏览器的可视高度 -->
  <el-row class="min-h-screen bg-indigo-400">
    <!--
    使用弹性布局flex
    items-center:水平居中
    justify-center:垂直居中
    鼠标悬停在样式上会显示具体的CSS样式
    -->
    <el-col :span="14" style="display: flex;" class="items-center justify-center flex-col">
      <div class=" font-bold text-5xl text-light-50 mb-4">欢迎光临</div>
      <div class=" text-gray-200 text-sm">此站点为紫金生产实习DeepSeek网站</div>
    </el-col>
    <el-col :span="10" style="display: flex;" class=" bg-light-50 items-center
    justify-center flex-col">
    <div class="font-bold text-3xl text-gray-700">欢迎回来</div>
    <div class="flex items-center justify-center my-5 text-gray-300
    space-x-2">
    <span class=" h-[1px] w-16 bg-gray-200"></span>
    <span>账号密码登录</span>
    <span class=" h-[1px] w-16 bg-gray-200"></span>
    </div>
    <!-- 使用ElementPlus中的表单组件实现 -->
    


  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="登录" name="loginPane">
      <el-form :model="loginForm" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户名:">
          <el-input v-model="loginForm.username" autocomplete="off" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password" label="密码:">
          <el-input v-model="loginForm.password" type="password" show-password placeholder="请输入密码" />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" class="w-[260px]" round @click="login">登录</el-button>
        </el-form-item>


      </el-form>
    </el-tab-pane>







    <el-tab-pane label="注册" name="registPane">
      <el-form :model="registForm" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户名:">
          <el-input v-model="registForm.username" autocomplete="off" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password" label="密码:">
          <el-input v-model="registForm.password" type="password" show-password placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="registForm.phone" autocomplete="off" placeholder="请输入电话" />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" class="w-[260px]" round @click="regist">注册</el-button>
        </el-form-item>


      </el-form>
    </el-tab-pane>
  </el-tabs>






    </el-col>
  </el-row>
</template>






















<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import * as user from '../assets/user.js'

const activeName = ref('loginPane')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}





const loginForm = reactive({
  username: '',
  password: ''
})

const registForm = reactive({
  username: '',
  password: '',
  phone: ''
})

import qs from 'qs'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

function login() {
  console.log(loginForm.username)
  console.log(loginForm.password)

  console.log(qs.stringify(loginForm))

  user.login(qs.stringify(loginForm))
    .then(res => {
      if (res.data.responseCode == '200') {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 1000
        })
        
        localStorage.setItem('id',res.data.returnObject.id)

        router.push('/success')
      } else {
        ElMessage({
          message: res.data.message,
          type: 'error',
          duration: 1000
        })
      }

    })

}


function regist() {
  user.regist(qs.stringify(registForm))
    .then(res => {
      if (res.data.responseCode == '200') {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 1000
        })
      } else {
        ElMessage({
          message: res.data.message,
          type: 'error',
          duration: 1000
        })
      }

    })

}
</script>

<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
